<template>
  <div class="tag">
    <div class="title">类目信息</div>
    <el-tabs v-model="type" type="card">
      <el-tab-pane label="服务类" name="server">
        <div v-for="(val, key, index) in serviceList" :key="'info' + index">
          <div>
            <span>{{ key }}：</span>
            <el-tag v-for="(item, indey) in val" :key="indey">
              {{ item.Name }}
            </el-tag>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "server",
      categoryRespList: [
        {
          type: "service",
          topCode: "yi",
          topName: "医",
          Code: "ganmao",
          Name: "感冒",
        },
        {
          type: "service",
          topCode: "yi",
          topName: "医",
          Code: "fashao",
          Name: "发烧",
        },
        {
          type: "service",
          topCode: "zhu",
          topName: "住",
          Code: "ganmao",
          Name: "公寓",
        },
        {
          type: "goods",
          topCode: "chi",
          topName: "吃",
          Code: "fan",
          Name: "饭",
        },
        {
          type: "goods",
          topCode: "chi",
          topName: "吃",
          Code: "chi",
          Name: "面",
        },
        {
          type: "goods",
          topCode: "he",
          topName: "喝",
          categoryCode: "yinliao",
          Name: "饮料",
        },
      ],
    };
  },
  methods: {},
  created() {},
  computed: {
    serviceList() {
      let map = {};
      for (let i = 0; i < this.categoryRespList.length; i++) {
        const item = this.categoryRespList[i];
        if (item.type === "service") {
          if (!map[item.topName]) {
            map[item.topName] = [];
          }
          map[item.topName].push(item);
        }
      }
      return map;
    },
  },
};
</script>
<style scoped lang="scss">
.tag {
  .title {
    font-weight: bolder;
    font-size: 20px;
    margin-bottom: 12px;
  }
}
.el-tag {
  margin-right: 12px;
  margin-bottom: 12px;
}
</style>
